<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>登录页面</title>
    <!-- 登录页面修饰 -->
    <link rel="stylesheet" href="../css/cui.css" />
	<link rel="stylesheet" href="../css/cui-rel.css" />
	<link rel="stylesheet" href="../css/lib.css" />
	<link rel="stylesheet" href="../css/style.css" />
	<link rel="stylesheet" href="../css/style-rel.css" />
	<script src="../js/axios.min.js"></script>
</head>
<style>
  body{
    background-image: url(../images/a.png);
    background-color: cadetblue;
  }
</style>
<body>
    <div id="bd">
		<div class="wp">
			<div class="loginBox">
				<form action="">
					<table>
						<caption>登录账号</caption>
						<tr>
							<th><span class="ico-user"></span></th>
							<td><input type="text" placeholder="用户名/邮箱" id="username" </td>
						</tr>
						<tr>
							<th><span class="ico-key"></span></th>
							<td><input type="text" placeholder="登陆密码" id="paw" ></td>
						</tr>
						<tr>
							<th></th>
							<td>
								<label for="" class="mr20"><input type="checkbox" id="rember" > 记住登录状态</label><a href="">忘记密码？</a>
								<input type="submit" value="立即登录" class="btn1 ani" id="btn1">
								<a href="" class="red f14">注册一个新账号</a>
							</td>
						</tr>
					</table>
				</form>
			</div>
		</div>
	</div>
    <script>
        let ipts = document.querySelectorAll("input");
      btn1.onclick = function (evt) {
        //发起的注册请求--注册接口 需要什么参数  想法获取这些参数
        let username = ipts[0].value;
        let password = ipts[0].value;
        // 4-发起注册请求-注册成功-跳转登录
        let loginAPI = "http://jx.xuzhixiang.top/ap/api/login.php";

        let p = axios.get(loginAPI, {
          params: { username: username, password },
        });
        p.then((r) => {
          // r axios处理的结果
          console.log(r);
          //成功 服务器返回的数据
          console.log(r.data);
          if (r.data.code == 0) {
            alert(r.data.msg);
          } else {
            alert(r.data.msg);
            console.log(r.data.data.id);
            // 存入 本地
            localStorage.setItem("id", r.data.data.id);
            localStorage.setItem("loginId", r.data.data.id);
           

            // token: "9e960402a7672e1f3951a7acab61386a"
            // ****登录的令牌 ，登录的凭证--一般是的登录的时候返回--
            localStorage.setItem("token", r.data.data.token);
            localStorage.setItem("loginToken", r.data.data.token);
            // loginToken
            //-登录成功-跳转登录
            location.href = "../index.html";
          }
        });
        evt.preventDefault();
      };
    </script>

    <script>
      /* 获取元素 */
      const userName = document.getElementById('userName')
      const paw = document.getElementById('paw')
      const remember = document.getElementById('remember')
          /* 添加点击事件 */
      remember.onclick = () => {
              /* 判断是否被选中 */
              if (remember.checked) {
                  /* 走到这 代表选中，把用户名和密码放入本地存储 */
                  localStorage.setItem("userName", userName.value)
                  localStorage.setItem("paw", paw.value)
              } else {
                  /* 走到这说明没选中  把数据删除 */
                  localStorage.removeItem("userName", userName.value)
                  localStorage.removeItem("paw", paw.value)
              }
          }
          /* 判断本地有没有值 */
      if (localStorage.getItem("userName")) {
          /* 走到这说明有值 */
          userName.value = localStorage.getItem("userName")
          paw.value = localStorage.getItem("paw")
          remember.checked = true
      }
  </script>
</body>
</html>